<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns:th = "http://www.thymeleaf.org"
      lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title></title>
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500" rel="stylesheet"/>
    <link href="https://cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css" rel="stylesheet" />

    <!-- PLUGINS CSS STYLE -->
    <link href="assets/plugins/toaster/toastr.min.css" rel="stylesheet" />
    <link href="assets/plugins/nprogress/nprogress.css" rel="stylesheet" />
    <link href="assets/plugins/flag-icons/css/flag-icon.min.css" rel="stylesheet"/>
    <link href="assets/plugins/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
    <link href="assets/plugins/ladda/ladda.min.css" rel="stylesheet" />
    <link href="assets/plugins/select2/css/select2.min.css" rel="stylesheet" />
    <link href="assets/plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />
    <!-- SLEEK CSS -->
    <link id="sleek-css" rel="stylesheet" href="assets/css/sleek.css" />

    <!-- FAVICON -->
    <link href="assets/img/favicon.png" rel="shortcut icon" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/assets/plugins/nprogress/nprogress.js"></script>
</head>

<body>
<div th:fragment = "orders">
            <div class="card" id="recent-orders" style="width: 1000px;">
                <div class="card-body pt-0 pb-5">
                    <table class="table table-striped mt-5" style="width:900px;">
                        <thead style="text-align: center;" >
                        <tr>
                            <th scope="col">订单号</th>
                            <th scope="col">商品名</th>
                            <th scope="col" >数目</th>
                            <th scope="col">日期</th>
                            <th scope="col">价格</th>
                            <th scope="col">操作</th>
                            <th scope="col"></th>
                        </tr>
                        </thead>
                        <tbody style="text-align: center" th:each = "order : ${orders}">

                        <tr style="border-top: 2px solid darkgray;text-align: center">
                            <td th:text="${order.id}">24541</td>
                            <td style="width: 200px" >
                                <div style="width: 200px" ><a class="text-dark" href="" style="word-wrap: break-word" th:text="${order.good.name}"> CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</a></div>
                            </td>
                            <td th:text="${order.number}">1</td>
                            <td th:text="${order.placedAt}">Oct 20, 2018</td>
                            <td th:text = "${order.good.price}">¥230</td>
                            <td th:if="${order.seller.id} == ${user.id}">卖出</td>
                            <td th:if="${order.buyer.id} eq ${user.id}">购买</td>
                            <td>
                                <div class="dropdown show d-inline-block widget-dropdown">
                                    <a class="dropdown-toggle icon-burger-mini" href="" role="button" id="dropdown-recent-order1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
                                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">
                                        <li class="dropdown-item">
                                            <form th:action="@{'/goods=' + ${order.good.id}}">
                                                <button class = "btn">查看该商品</button>
                                            </form>
                                        </li>
                                        <li class="dropdown-item" th:if="${current.id} == ${user.id}">
                                            <form th:action = "@{/delete-order}" method="post">
                                                <input type = "hidden" th:value="${order.id}" name = "id">
                                                <button class = "btn">删除</button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <br>
                </div>
            </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCn8TFXGg17HAUcNpkwtxxyT9Io9B_NcM" defer></script>
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/plugins/toaster/toastr.min.js"></script>
<script src="/assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
<script src="/assets/plugins/charts/Chart.min.js"></script>
<script src="/assets/plugins/ladda/spin.min.js"></script>
<script src="/assets/plugins/ladda/ladda.min.js"></script>
<script src="/assets/plugins/jquery-mask-input/jquery.mask.min.js"></script>
<script src="/assets/plugins/select2/js/select2.min.js"></script>
<script src="/assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
<script src="/assets/plugins/jvectormap/jquery-jvectormap-world-mill.js"></script>
<script src="/assets/plugins/daterangepicker/moment.min.js"></script>
<script src="/assets/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/assets/plugins/jekyll-search.min.js"></script>
<script src="/assets/js/sleek.js"></script>
<script src="/assets/js/chart.js"></script>
<script src="/assets/js/date-range.js"></script>
<script src="/assets/js/map.js"></script>
<script src="/assets/js/custom.js"></script>
</body>
</html>
